<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: 'home' }">学生</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理设计</el-breadcrumb-item>
    </el-breadcrumb>

    <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">查看课程设计任务</h2>

    <!-- 选择框和搜索栏 -->
    <!-- <el-row :gutter="20" style=" margin-top: 20px; ">
      <el-col :span="8">
        <div class="grid-content ep-bg-purple">
          <el-select v-model="value" class="m-2" placeholder="选择类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content ep-bg-purple">
          <el-input
          v-model="input1"
          class="w-50 m-2"
          placeholder="搜索"
          :prefix-icon="Search"
          style="width: auto; margin-right: 10px;"
          />
          <el-button type="primary" :icon="Search">查询</el-button>
        </div>
      </el-col>
    </el-row>  -->
    
    <!-- 表格 -->
    <div style="margin: 3% 5% 3% 5%;">
      <el-table :data="courseTask" height="550" style="width: 100%">
        <el-table-column prop="courseName" label="实践名称"  align="center"/>
        <el-table-column prop="className" label="班级"  align="center"/>

        <el-table-column prop="adviserName" label="指导教师"  align="center"/>
        <el-table-column prop="teacherPhone" label="联系方式" align="center"/>
        <el-table-column prop="onloadDate" label="日期" :formatter="formatDate" align="center"/>

        <el-table-column fixed="right" label="题目详情" width="120" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="toPost(scope.row.practicalId)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script setup>
import { ArrowRight, Calendar, Search } from '@element-plus/icons-vue'
import { ref, onBeforeMount } from 'vue'
import requests from '@/api/ajax'
import { useRouter } from 'vue-router'

const router_useRouter = useRouter()
function toPost(id) {
  router_useRouter.push({
    path: 'courseTaskDetail',
    query: { practicalId: id }
  })
  // $router.push(`courseTaskDetail/${scope.row.practicalId}`)
}


onBeforeMount(() => {
  const getCourseTask = requests({ url: "/students/CoursePublish", method: "get" }).then(res => {
    if (res.code === 20041) {
      courseTask.value = res.rdata
    } else {
      courseTask.value = null
    }

  }).catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });

})

//课程设计任务I信息
const courseTask = ref([
  // {
  //   "practicalId": 1,
  //   "classId": 2,
  //   "className": "RB软工互192",
  //   "adviserId": 1,
  //   "adviserName": "李春",
  //   "teachId": 2,
  //   "teachName": "徐家豪",
  //   "practicalType": 0,
  //   "onloadDate": "2023-04-19T16:00:00.000+00:00",
  //   "planId": 1,
  //   "courseId": 0,
  //   "courseName": "软工实践一",
  //   "majorName": null,
  //   "enrolDate": null,
  //   "teacherPhone": "13911111111"
  // }
])

//时间格式化
function formatDate(row, column, cellValue, index) {
  let format = 'YYYY-mm-dd'
  let date = new Date(cellValue);
  const dataItem = {
    'Y+': date.getFullYear().toString(),
    'm+': (date.getMonth() + 1).toString(),
    'd+': date.getDate().toString(),
  }
  Object.keys(dataItem).forEach((item) => {
    const ret = new RegExp(`(${item})`).exec(format);
    if (ret) {
      format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
    }
  });

  return format
}
</script>
<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>